<template>
  <div class="search-suggest">
    <h5>搜索"{{ keywords }}"</h5>
    <ul v-if="suggesList.length>0">
      <li
        @click="$emit(`changekeyword`, s.name)"
        v-for="s in suggesList"
        :key="s.id"
      >
        <span>{{ s.name }}</span>
      </li>
    </ul>
    <music-loading v-else></music-loading>
  </div>
</template>

<script>
import MusicLoading from "./MusicLoading.vue";
import  _ from 'lodash'//引入库

export default {
  props: {
    keywords: String,
  },
  data() {
    return {
      suggesList: [],
    };
  },
  created() {
    this.getSuggest();
  },
  methods: {
    async getSuggest() {
      // 搜索建议
      let suggest = await this.axios.get(
        `/search/suggest?keywords=${this.keywords}`
      );
      let suggestAll = [];
      if (suggest && suggest.result && suggest.result.order) {
        suggest.result.order.forEach((keyname) => {
          suggestAll = suggestAll.concat(suggest.result[keyname]);
        });
        // console.log("搜索建议拼接之后的数据==>",suggestAll);
        this.suggesList = suggestAll;
      }
    },
  },
  watch: {
    // ==》输入防抖
    keywords:_.debounce(function(){
      this.getSuggest();
    },200),
  },
  components: {
    MusicLoading
  },
};
</script>

<style lang="less" scoped>
.search-suggest {
  h5 {
    font-size: 15px;
    color: rgb(93, 144, 202);
    margin-bottom: 1px solid #eee;
    padding: 0 0 10px 5px;
  }
  ul {
    padding-left: 6px;
    li {
      margin-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      &::before {
        content: "";
        background: url()
          no-repeat;
        display: inline-block;
        width: 15px;
        height: 15px;
      }
      span {
        flex: 1;
        margin-bottom: 1px solid #eee;
        padding: 13px 0px 13px 8px;
        font-size: 14px;
      }
    }
  }
}
</style>